<script>

import LayoutComponent from '@/components/LayoutComponent.vue'
import BlogListComponent from '@/components/BlogListComponent.vue'

export default {
  name: 'IndexView',
  components: { BlogListComponent, LayoutComponent },
  data () {
    return {
      basePath: process.env.VUE_APP_BASE_PATH,
      vipInfo: {}
    }
  },
  methods: {
    getVipInfo () {
      this.$axios.get('api/info').then(data => {
        this.vipInfo = { ...data }
      }).catch(e => e)
    }
  },
  created () {
    this.$nextTick(() => {
      this.getVipInfo()
    })
  }
}
</script>

<template>
<layout-component :active-index="0">
    <blog-list-component/>
    <div class="user">
      <div class="avatar">
        <img v-if="vipInfo.avatar?.startsWith('http')" :src="vipInfo.avatar" alt="">
        <img v-else :src="basePath+vipInfo.avatar" alt="">
      </div>
      <div class="nickname">{{vipInfo.nickname}}</div>
      <div class="concat">联系我：<a :href="vipInfo.email">{{vipInfo.email}}</a></div>
      <div class="profile">{{vipInfo.profile}}</div>
    </div>
</layout-component>
</template>

<style scoped lang="scss">

    .user{
      width: 220px;
      height: 400px;
      background-color: #e8ecef;
      margin-top: 10px;
      .avatar{
        height: 220px;
        width: 220px;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
          display: block;
          height: 200px;
          width: 200px;
          border-radius: 15%;
        }
      }
      .nickname{
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-weight: bold;
      }
      .concat,.profile{
        width: 200px;
        margin: 10px auto;
      }
      .profile{
        color: #c5c0c0;
        font-size: 14px;
      }
    }

</style>
